<template>
  <div
    class="w-full max-w-[1200px] min-h-[calc(100vh-100px)] mx-auto my-5 mb-12 p-4 bg-white rounded-lg shadow-sm"
  >
    <div class="flex items-center px-4">
      <a-tabs v-model:activeKey="activeTab" class="flex-1">
        <template #rightExtra>
          <div class="space-x-2">
            <a-button type="text" @click="toggleExpand" class="icon-btn">
              <div class="icon-wrapper">
                <transition name="fade" mode="out-in">
                  <expand-alt-outlined v-if="!isAllExpanded" key="expand" />
                  <shrink-outlined v-else key="shrink" />
                </transition>
              </div>
            </a-button>
            <a-button type="text" @click="markAllAsRead">全部已读</a-button>
            <a-button type="text" @click="handleBack">返回</a-button>
          </div>
        </template>
        <a-tab-pane key="1">
          <template #tab>
            <div class="inline-flex items-center">
              <bell-outlined />
              <span>系统</span>
            </div>
          </template>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <div class="inline-flex items-center">
              <user-outlined />
              <span>用户</span>
            </div>
          </template>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #tab>
            <div class="inline-flex items-center">
              <thunderbolt-outlined />
              <span>活动</span>
            </div>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="px-4">
      <a-collapse v-model:activeKey="activeKey">
        <template v-if="filteredNotifications.length">
          <a-collapse-panel
            v-for="notice in filteredNotifications"
            :key="notice.id"
            @click="handleNoticeClick(notice)"
          >
            <template #header>
              <span>{{ notice.name }}</span>
            </template>
            <template #extra>
              <div class="flex items-center gap-2">
                <span class="text-sm text-gray-500">{{
                  notice.createTime
                }}</span>
                <div class="w-2 h-2">
                  <div
                    v-if="!notice.isRead"
                    class="w-full h-full rounded-full bg-red-500"
                  ></div>
                </div>
              </div>
            </template>
            <p>{{ notice.content }}</p>
          </a-collapse-panel>
        </template>
        <div v-else class="py-16 text-center">
          <inbox-outlined class="text-gray-300 text-4xl mb-4" />
          <p class="text-gray-500">暂无通知</p>
        </div>
      </a-collapse>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  BellOutlined,
  UserOutlined,
  ThunderboltOutlined,
  ExpandAltOutlined,
  ShrinkOutlined,
  InboxOutlined,
} from "@ant-design/icons-vue";
import { noticeApi } from "../../../api/frontend/notice";
import { message } from "ant-design-vue";
import { useAuthStore } from "@/stores/auth"; // 添加 auth store

const authStore = useAuthStore(); // 初始化 auth store
const activeTab = ref("1");
const notifications = ref([]);
const activeKey = ref([]);
const isAllExpanded = ref(false);
const router = useRouter();

// 获取通知列表
const fetchNotifications = async () => {
  try {
    const res = await noticeApi.getAllList();
    if (res.code === 200) {
      notifications.value = res.data;
    }
  } catch (error) {
    console.error("获取通知列表失败:", error);
  }
};

// 根据类型筛选通知
const filteredNotifications = computed(() => {
  return notifications.value.filter(
    (item) => String(item.type) === activeTab.value
  );
});

// 修改全部已读方法
const markAllAsRead = async () => {
  if (!authStore.isAuthenticated) {
    message.warning("登录后再尝试哦~");
    return;
  }

  try {
    await noticeApi.markAllAsRead();
    // 更新本地通知状态
    notifications.value = notifications.value.map((notice) => ({
      ...notice,
      isRead: true,
    }));
    message.success("已全部标记为已读");
  } catch (error) {
    console.error("标记全部已读失败:", error);
  }
};

const toggleExpand = () => {
  isAllExpanded.value = !isAllExpanded.value;
  if (isAllExpanded.value) {
    activeKey.value = filteredNotifications.value.map((notice) => notice.id);
  } else {
    activeKey.value = [];
  }
};

const handleBack = () => {
  router.back();
};

// 添加通知点击处理方法
const handleNoticeClick = async (notice) => {
  if (!notice.isRead) {
    try {
      await noticeApi.markAsRead(notice.id);
      // 更新本地通知状态
      const index = notifications.value.findIndex((n) => n.id === notice.id);
      if (index !== -1) {
        notifications.value[index].isRead = true;
      }
    } catch (error) {
      console.error("标记已读失败:", error);
    }
  }
};

onMounted(() => {
  fetchNotifications();
});
</script>

<style scoped>
:deep(.anticon) {
  font-size: 16px;
}

:deep(.ant-collapse) {
  background: transparent;
  border: none;
}

:deep(.ant-collapse-item) {
  background: white;
  border: none;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.ant-collapse-header) {
  padding: 12px 16px !important;
}

:deep(.ant-collapse-content) {
  border-top: none;
}

:deep(.ant-collapse-content-box) {
  padding: 8px 16px !important; /* 减小内容区域的内边距 */
}

:deep(.ant-collapse-content-box p) {
  margin-bottom: 0; /* 移除段落的下边距 */
  line-height: 1.5; /* 优化行高 */
}

:deep(.ant-btn) {
  display: inline-flex;
  align-items: center;
}

.icon-btn {
  height: 36px;
  width: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.icon-wrapper :deep(.anticon) {
  font-size: 20px; /* 增加图标大小 */
}

/* 图标切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: scale(1);
}
</style>
